<template>
  <div class="home__container">
    <div class="home__container__header">
      <div class="wrapper w flex-jac">
        <h3 class="home__title">我们是一个开放的技术社区</h3>
        <p class="home__desc">每一位开发者都在贡献和更新技术内容，共同参与社区建设，维护社区秩序。如果你和我们一样有技术理想，并愿意贡献自己的力量，欢迎加入我们。</p>
        <button class="btn" @click="router.replace('/login')">注册登录</button>
        <nav class="home__container__header__nav">
          <NavItem v-for="item in NavItemArr" v-bind="item" :key="item.id" />
        </nav>
      </div>
    </div>
    <!-- 精彩内容 -->
    <div class="exciting-content">
      <Card title="精彩内容" desc="中国开源码力榜启动，寻找开源世界的超级玛丽">
        <div class="card__main">
          <Item v-for="item in excitingContent" type="article" :key="item.id" :item="item" />
        </div>
      </Card>
    </div>
    <!-- 推荐专区 -->
    <div class="recommended-zone">
      <Card title="推荐专区" desc="商务合作咨询">
        <div class="card__main">
          <Item v-for="item in recommendedZone" type="kecheng" :key="item.id" :item="item" />
        </div>
      </Card>
    </div>
    <!-- 社区贡献者 -->
    <div class="community">
      <Card title="社区贡献者" :is-icon="true">
        <div class="card__main">
          <div class="contribute" v-for="items, index in contribute" :key="index">
            <div class="header">
              <span>{{ index == "community" ? '问答贡献' : "社区贡献" }}</span>
            </div>
            <div class="main">
              <div class="item flex-ac" v-for="item, index2  in items" :key="item.id">
                <span class="number">{{ index2 + 1 }}</span>
                <div class="userInfo flex-ac">
                  <img v-lazy src="" :data-src="item.avatar" class="avatar" />
                  <div class="right">
                    <span class="username">{{ item.nickname }}</span>
                    <div class="desc">{{ item.desc }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </Card>
    </div>
  </div>
</template>

<script setup lang="ts">
import NavItem from './header/Item.vue';
import Card from './Card.vue';
import Item from './item/Item.vue';
import { IArcticle } from '@/interface/IArticle';
import { IUser } from '@/interface/IUser';
import { onBeforeMount, reactive, ref } from 'vue';
import { excitingContentApi, recommendedZoneApi } from '@/api/articleApi';
import { contributeApi } from '@/api/userApi';
import { useRouter } from 'vue-router';
const NavItemArr = [{ id: 1, title: "问答", desc: "提出问题并向他人学习", icon: "xinxi1", path: "/answers" },
{ id: 2, title: "专栏", desc: "学习和分享技术知识", icon: "wenben", path: "/special/column" },
{ id: 3, title: "课程", desc: "按专业方向提升技能", icon: "kecheng_m", path: "/course" },
{ id: 4, title: "活动", desc: "和同行面对面交流", icon: "yuangong1", path: "/activity" },]
const router = useRouter();
const excitingContent = ref<Array<IArcticle>>()//精彩内容
const recommendedZone = ref<Array<IArcticle>>()//推荐专区
const contribute = reactive<{ questions: IUser[], community: IUser[] }>({
  questions: [],//社区贡献
  community: [],//问答贡献
});

onBeforeMount(() => {
  // 精彩内容
  excitingContentApi().then(res => {
    excitingContent.value = res.data;
  })
  //推荐专区
  recommendedZoneApi().then(res => {
    recommendedZone.value = res.data;
  })
  // 社区贡献
  contributeApi("questions").then(res => {
    contribute.community = res.data!;
  })
  // 问答贡献
  contributeApi("community").then(res => {
    contribute.questions = res.data!;
  })
})


</script>

<style lang="scss" scoped>
.home__container {
  background-color: red;

  &__header {
    background: url('../../assets/imgs/bg.webp') no-repeat;
    background-size: 100% auto;
    height: 370px;

    .wrapper {
      flex-direction: column;
      gap: 30px;
      position: relative;
      height: inherit;

      .home__title {
        font-size: 42px;
        color: #fff;
        font-weight: normal;
      }

      .home__desc {
        width: 60%;
        font-size: 20px;
      }

      >button {
        background-color: $color;
        padding: 12px 50px;
      }
    }

    &__nav {
      width: 100%;
      position: absolute;
      display: grid;
      bottom: 0;
      transform: translate(0, 50%);
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
    }
  }
}

.exciting-content {
  padding: 90px 0 30px;
  background-color: rgb(233, 236, 239);

  .card__main {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, 1fr);
    justify-content: start;
  }
}

.recommended-zone {
  padding: 40px 0;
  background-color: #fff;

  .card__main {
    display: flex;
    gap: 14px;
    overflow: hidden;
  }
}

.community {
  padding: 40px 0;
  background-color: rgb(233, 236, 239);

  .card__main {
    padding-top: 20px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;

    .contribute {
      display: flex;
      flex-direction: column;
      background-color: #fff;
      border-radius: 4px;

      .header {
        padding: 10px;
        font-weight: bold;
        box-shadow: 0 1px 0 1px #0001;
      }

      .main {
        display: grid;
        grid-template-rows: repeat(5, 1fr);
        grid-auto-flow: column;

        .item {
          padding: 16px;
          gap: 10px;

          .userInfo {
            gap: 4px;
            color: #2C2C2C;

            .right {
              margin-left: 6px;
            }

            .avatar {
              border-radius: 50%;
              object-fit: cover;
              width: 41px;
              height: 41px;
            }

            .number {
              color: #737373;
            }

            .desc {
              font-size: 14px;
              margin: 6px 0;
            }

            .desc,
            .username {
              display: block;
              max-width: 190px;
              word-wrap: normal;
              white-space: nowrap;
              text-overflow: ellipsis;
              overflow: hidden;
            }
          }
        }
      }
    }
  }

}
</style>